<template>
  <div class="add-analysis">
    <common-block :activeNum="activeNum" :steps="steps" :saveFlag="true">
      <div class="title" slot="title">新建分析</div>
    </common-block>
    <div class="bottom bottom-1" v-if="activeNum === 0">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="singleTable"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="name" label="任务名称"></el-table-column>
          <el-table-column prop="state" label="首页地址"></el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </template>
    </div>
    <div class="bottom bottom-2" v-if="activeNum === 1">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1"><el-input /></td>
          <th>首页地址</th>
          <td colspan="3">
            <el-input placeholder="请输入内容">
              <template slot="append"><el-button>获取标题</el-button></template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>包含性分析过滤(url)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>排除性分析过滤(url)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>任务标签</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>包含性关键字过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>排除性关键字过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>辅助分析关键字</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>状态</th>
          <td colspan="1">STOPPED</td>
          <th>任务进度</th>
          <td colspan="3">62.93</td>
        </tr>
        <tr>
          <th>上次启动时间</th>
          <td colspan="1">STOPPED</td>
          <th>任务用时</th>
          <td colspan="1"><el-input type="number" /></td>
          <th>失败数量</th>
          <td colspan="1"><el-input type="number" /></td>
        </tr>
      </table>
    </div>
    <div class="bottom bottom-3" v-if="activeNum === 2">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1"><el-input readonly /></td>
          <th>首页地址</th>
          <td colspan="1"><el-input readonly /></td>
        </tr>
        <tr>
          <th>分析规则</th>
          <td colspan="3">新建时不可用</td>
        </tr>
      </table>
    </div>
    <div class="bottom bottom-4" v-if="activeNum === 3">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1"></td>
          <th>首页地址</th>
          <td colspan="3"></td>
        </tr>
        <tr>
          <th>包含性分析过滤(url)</th>
          <td colspan="1"></td>
          <th>排除性分析过滤(url)</th>
          <td colspan="1"></td>
          <th>任务标签</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>包含性关键字过滤</th>
          <td colspan="1"></td>
          <th>排除性关键字过滤</th>
          <td colspan="1"></td>
          <th>辅助分析关键字</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>下载大小</th>
          <td colspan="1"></td>
          <th>分析文件数</th>
          <td colspan="1"></td>
          <th>创建时间</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>状态</th>
          <td colspan="1"></td>
          <th>任务进度</th>
          <td colspan="3"></td>
        </tr>
        <tr>
          <th>上次启动时间</th>
          <td colspan="1"></td>
          <th>任务用时</th>
          <td colspan="1"></td>
          <th>失败数量</th>
          <td colspan="1"></td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import CommonBlock from "@/components/CommonBlock.vue";
export default {
  components: {
    CommonBlock,
  },
  data() {
    return {
      activeNum: 0,
      steps: ["选择模板", "新建分析", "主要分析设置", "保存分析"],
      total: 0,
      currentPage: 1,
      selectRows: [],
      tableData: [{ 1: 1 }, {}],
    };
  },
  methods: {
    upStep() {
      this.activeNum -= 1;
      if (this.activeNum === 0) {
        this.$refs.singleTable.setCurrentRow(this.selectRows);
      }
    },
    downStep() {
      if (Object.keys(this.selectRows).length === 0) {
        this.$message.error("请选择一条数据");
        return false;
      } else {
        this.activeNum += 1;
      }
    },
    handleCurrentChange(val) {
      this.selectRows = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.add-analysis {
  display: flex;
  flex-direction: column;
  .title {
    font-size: 1.5rem;
    color: #000;
    display: inline-block;
    font-weight: bold;
  }
  .bottom {
    flex: 1;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    .data-title {
      border: 1px solid #ebeef5;
      padding: 0.8rem 0.5rem;
      width: 100%;
      text-align: center;
      background: #fafafa;
      font-size: 1rem;
      padding: 1rem 0;
      border-bottom: none;
    }
  }
  .el-pagination {
    width: 100%;
    text-align: right;
    padding: 0;
    margin: 0.5rem 0;
  }
  table {
    width: 100%;
    background: #e8e8e8;
    td {
      background: #fff;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    th {
      background: #fafafa;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      font-weight: normal;
      font-size: 0.9rem;
      line-height: 1.5;
      width: 10rem;
    }
  }
}
</style>
